<!DOCTYPE html>
<html lang="en" xmlns:layout="http://www.w3.org/1999/xhtml"
      layout:decorate="~{commonJs}" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>旅客管理系统</title>

</head>
<body layout:fragment="content">
<div id="adminIndex">
    <el-container>
        <el-header style="padding: 0">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                     background-color="#545c64"
                     text-color="#fff"
                     active-text-color="#ffd04b">
                <el-menu-item index="1">旅客管理系统</el-menu-item>
                <el-submenu index="2" style="float: right;margin-right: 30px;">
                    <template slot="title">管理员</template>
                    <el-menu-item index="2-1" v-on:click="logout">退出系统</el-menu-item>
                </el-submenu>
                </el-menu-item>
            </el-menu>
        </el-header>
        <el-container>
            <el-aside width="220px" style="min-height: 800px;background-color:#545c64">

                <el-row class="tac">
                    <el-col :span="24">
                        <el-menu
                                default-active="0"
                                class="el-menu-vertical-demo"
                                @open="handleOpen"
                                @close="handleClose"
                                background-color="#545c64"
                                text-color="#fff"
                                active-text-color="#ffd04b">

                            <el-menu-item index="1" v-on:click="addTab('旅客入住管理','/passenger/residence/info/list')">
                                <template slot="title">
                                    <i class="el-icon-coordinate"></i>
                                    <span>旅客入住管理</span>
                                </template>
                            </el-menu-item>

                            <el-menu-item index="2" v-on:click="addTab('房源管理','/hotel/list')">
                                <template slot="title">
                                    <i class="el-icon-s-home"></i>
                                    <span>房源管理</span>
                                </template>
                            </el-menu-item>

                            <el-menu-item index="3" v-on:click="addTab('用户管理','/sys/user/list')">
                                <template slot="title">
                                    <i class="el-icon-user"></i>
                                    <span>用户管理</span>
                                </template>
                            </el-menu-item>


                        </el-menu>
                    </el-col>
                </el-row>
            </el-aside>
            <el-container>
                <el-main>
                    <!--<el-breadcrumb separator="/">
                        <el-breadcrumb-item>首页</el-breadcrumb-item>
                        <el-breadcrumb-item>任务</el-breadcrumb-item>
                    </el-breadcrumb>-->
                    <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
                        <el-tab-pane
                                v-for="(item, index) in editableTabs"
                                :key="item.name"
                                :label="item.title"
                                :name="item.name">
                            <div v-html="item.content"></div>
                        </el-tab-pane>
                    </el-tabs>
                </el-main>
                <el-footer></el-footer>
            </el-container>
        </el-container>
    </el-container>
    <el-dialog
            :title="dialogInfo.title"
            :visible.sync="dialogInfo.dialogVisible"
            width="800px"
            :modal="true"

            :close-on-click-modal="false">
        <div>
            <iframe :src="dialogInfo.url" width="100%" height="500px" frameborder="0"></iframe>
        </div>
    </el-dialog>
</div>


<script>
    var vm = new Vue({
        el: '#adminIndex',
        data: {
            activeIndex: '0',
            editableTabsValue: '0',
            editableTabs: [],
            tabIndex: 0,
            dialogInfo: {
                dialogVisible: false,
                title: "新增",
                url: "#",
                vm: null,
                params: {}
            }
        },
        methods: {
            handleSelect: function (key, keyPath) {
                console.log(key, keyPath);
            }, handleOpen: function (key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose: function (key, keyPath) {
                console.log(key, keyPath);
            },
            openTable: function (url) {
                alert(url);
            },

            addTab: function (targetName, url) {

                console.log('addTab:', targetName);

                var flag = this.editableTabs.some(function (item) {
                    return item.title == targetName;
                });

                // var flag = true;
                // for (var i = 0, len = this.editableTabs.length; i < len; i++) {
                //     if (this.editableTabs[i].title == targetName) {
                //         flag = false;
                //         break;
                //     }
                // }
                if (!flag) {
                    var newTabName = ++this.tabIndex + '';
                    var content = '<iframe scrolling="auto" frameborder="0" id="iframe' + newTabName + '"  src="' + url + '" style="width:100%;height: 800px;"></iframe>';
                    this.editableTabs.push({
                        title: targetName,
                        name: targetName,
                        content: content
                    });
                    this.editableTabsValue = targetName;
                } else {
                    this.editableTabsValue = targetName;
                }

            },
            removeTab: function (targetName) {
                var tabs = this.editableTabs;
                var activeName = this.editableTabsValue;
                if (activeName === targetName) {
                    // tabs.forEach((tab, index) =>{
                    //     if (tab.name === targetName) {
                    //         var nextTab = tabs[index + 1] || tabs[index - 1];
                    //         if (nextTab) {
                    //             activeName = nextTab.name;
                    //         }
                    //     }
                    // });

                    tabs.forEach(function (tab, index) {
                        if (tab.name === targetName) {
                            var nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                            }
                        }
                    });
                }

                this.editableTabsValue = activeName;
                //this.editableTabs = tabs.filter(tab = > tab.name !== targetName);
                this.editableTabs = tabs.filter(function (tab) {
                    return tab.name !== targetName;
                });
            },
            getVmId: function () {
                var id = this.dialogInfo.params.id;
                if (id == null) {
                    return "";
                }
                return id;
            }, logout: function () {
                window.location.href = "/logout"
            },
            getVmPassportFilesJsonString:function () {
                let passportFiles = this.dialogInfo.params.passportFiles;
                if (passportFiles == null) {
                    return "";
                }
                return passportFiles;
            }

        }
    });

    $(function () {
        vm.addTab('旅客入住管理','/passenger/residence/info/list');
    })
</script>
</body>
</html>
